<script setup>
import {onMounted, ref} from 'vue'
import {formatConfig, getGameConfig, saveGameConfig} from "src/utils/config";
import {Notify} from "quasar";

const props = defineProps(['page'])
let config = ref('')

onMounted(() => {
  // console.log('page', props.page)
  const game_config = getGameConfig()
  config.value = JSON.stringify(game_config.page[props.page], null,'\t')
})

function onSaveConfig() {
  let config_json = ''

  // 检查json格式
  try {
    config_json = JSON.parse(config.value)
  } catch (e) {
    Notify.create({
      message: '配置信息错误：' + e
    })
    return
  }

  // 更新配置
  const game_config = getGameConfig()
  game_config.page[props.page] = config_json
  saveGameConfig(game_config)

  // 重新格式化输出
  config.value = JSON.stringify(game_config.page[props.page], null,'\t')
}
</script>

<template>
  <q-card class="my-card">
    <q-card-section class="bg-primary text-white">
      <div class="text-h6">【{{ props.page }}】页面配置信息</div>
    </q-card-section>

    <q-separator/>

    <q-card-section>
      <q-input type="textarea" filled rows="40" v-model="config" label="配置信息"></q-input>
    </q-card-section>

    <q-card-actions align="right">
      <q-btn color="primary" @click="onSaveConfig" label="保存"/>
    </q-card-actions>
  </q-card>
</template>

<style scoped lang="sass">

</style>
